<template>
  <el-form :inline="true">
    <el-form-item label="软件名称">
      <el-input
        v-model="appInfo.softwareName"
        placeholder="软件名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="支持ROM">
      <el-input v-model="appInfo.supportROM" placeholder="支持ROM"></el-input>
    </el-form-item>
    <el-form-item label="软件大小（单位：M）">
      <el-input
        v-model="appInfo.softwareSize"
        placeholder="件大小（单位：M）"
      ></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="appInfo.status" placeholder="状态" clearable>
        <el-option
          v-for="item in appStatus"
          :key="item.valueId"
          :label="item.valueName"
          :value="item.valueId"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属平台">
      <el-select v-model="appInfo.flatformId" placeholder="所属平台" clearable>
        <el-option
          v-for="item in appFlatforms"
          :key="item.valueId"
          :label="item.valueName"
          :value="item.valueId"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="一级分类">
      <el-select
        v-model="appInfo.categoryLevel1"
        placeholder="一级分类"
        clearable
      >
        <el-option
          v-for="item in categories1"
          :key="item.id"
          :label="item.categoryName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select
        v-model="appInfo.categoryLevel2"
        placeholder="二级分类"
        clearable
      >
        <el-option
          v-for="item in categories2"
          :key="item.id"
          :label="item.categoryName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select
        v-model="appInfo.categoryLevel3"
        placeholder="三级分类"
        clearable
      >
        <el-option
          v-for="item in categories3"
          :key="item.id"
          :label="item.categoryName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { getDictData } from "@/api/dict";
import { getAppCategory } from "@/api/appcategory";

export default {
  name: "AppInfoEdit",
  props: ["model"],
  data() {
    return {
      appStatus: [],
      appFlatforms: [],
      categories1: [],
      categories2: [],
      categories3: [],
      appInfo: this.model,
    };
  },
  created() {
    this.queryStatusDict();
    this.queryFlatformDict();
    this.queryCategories1();
    getAppCategory({ parentId: this.appInfo.categoryLevel1 }).then((result) => {
      this.categories2 = result.data;
    });
    getAppCategory({ parentId: this.appInfo.categoryLevel2 }).then((result) => {
      this.categories3 = result.data;
    });
  },
  methods: {
    queryStatusDict() {
      getDictData("APP_STATUS").then((result) => {
        this.appStatus = result.data;
      });
    },
    queryFlatformDict() {
      getDictData("APP_FLATFORM").then((result) => {
        this.appFlatforms = result.data;
      });
    },
    queryCategories1() {
      getAppCategory({}).then((result) => {
        this.categories1 = result.data;
      });
    },
  },
  watch: {
    "appInfo.categoryLevel1"(newVal) {
      this.appInfo.categoryLevel2 = "";
      if (newVal === "") {
        this.categories2 = [];
      } else {
        getAppCategory({ parentId: newVal }).then((result) => {
          this.categories2 = result.data;
        });
      }
    },
    "appInfo.categoryLevel2"(newVal) {
      this.appInfo.categoryLevel3 = "";
      if (newVal === "") {
        this.categories3 = [];
      } else {
        getAppCategory({ parentId: newVal }).then((result) => {
          this.categories3 = result.data;
        });
      }
    },

    appInfo: {
      deep: true,
      handler(newVal) {
        this.$emit("model-changed", newVal);
      },
    },
  },
};
</script>

<style scoped></style>
